<template>
  <div class="form-container">
    <el-form inline :model="form" ref="refForm" class="form-line" label-width="70">
      <el-form-item label="订单编号" prop="orderId">
        <el-input size="default" v-model="form.orderId" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item label="所属驿站" prop="stageId">
        <el-select size="default" v-model="form.stageId" placeholder="所属驿站">
          <el-option v-for="item in siteList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间段" prop="startTime">
        <el-col :span="8">
          <el-date-picker v-model="form.startTime" type="date" placeholder="开始时间" style="width: 100%" />
        </el-col>
        <el-col :span="8"
          ><el-date-picker v-model="form.endTime" type="date" placeholder="结束时间" style="width: 100%"
        /></el-col>
      </el-form-item>
    </el-form>
    <div class="btn-container">
      <el-button type="primary" @click="handleRest(refForm as FormInstance)">重置</el-button>
      <el-button type="primary" @click="getDispatchOrderList">查询</el-button>
    </div>
  </div>
  <div class="form-container">
    <Tags :info="2" />
  </div>
  <div class="table-container">
    <el-table
      border
      :cell-style="{ textAlign: 'center', fontSize: '13px' }"
      :header-cell-style="{
        textAlign: 'center',
        fontWeight: '100',
        fontSize: '13px',
        color: 'white',
        backgroundColor: '#009688'
      }"
      style="width: 100%"
      :data="newRegisterData"
    >
      <el-table-column fixed prop="orderId" label="订单编号" />
      <el-table-column prop="deliveryAddress" label="送货地址" />
      <el-table-column prop="orderType" label="订单类型" />
      <el-table-column prop="deliveryEndTime" label="预计送达时间" />
      <el-table-column prop="actualArrvalTime" label="剩余时间" />
      <el-table-column prop="exDeliverymanName" label="配送员" />
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button
            type="text"
            @click="
              router.push({
                path: '/cityLevel/cityDispatch/dispatch/selectDetail',
                query: { id: scope.row.id, stageId: scope.row.stageId }
              })
            "
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        size="small"
        @change="getDispatchOrderList"
        layout="prev, pager, next"
        :total="pageTotal"
        :page-size="10"
      />
    </div>
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { Dispatch } from "@/api/interface/city/dispatch";
import { Site } from "@/api/interface/city/site";
import { getDispatchOrderListAPI } from "@/api/modules/city/dispatchAPI";
import { getSiteListAPI } from "@/api/modules/city/siteAPI";
import { ElMessage, FormInstance } from "element-plus";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import Tags from "./tags.vue";
const router = useRouter();
let pageTotal = ref<number>(0);
const form = ref<Dispatch.SelectParams>({
  city: JSON.parse(localStorage.getItem("userInfo") as string).city,
  province: JSON.parse(localStorage.getItem("userInfo") as string).province,
  status: "1",
  pageNum: "1",
  pageSize: "10"
});
const refForm = ref<FormInstance>();
const newRegisterData = ref<Dispatch.Select[]>([]);
const handleRest = (formEl: FormInstance) => {
  formEl.resetFields();
  getDispatchOrderList();
};
const getDispatchOrderList = async () => {
  const { rows, code, msg, total } = await getDispatchOrderListAPI(form.value);
  if (code == "200" && rows) {
    newRegisterData.value = rows;
    if (total) {
      pageTotal.value = total;
    }
  } else {
    ElMessage.error(`获取失败,${msg}`);
  }
};
const siteList = ref<Site.Row[]>([]);
const getList = async () => {
  const { rows, code, msg } = await getSiteListAPI({
    province: JSON.parse(localStorage.getItem("userInfo") as string).province,
    city: JSON.parse(localStorage.getItem("userInfo") as string).city,
    pageNum: 1,
    pageSize: 100
  });
  if (code == "200" && rows) {
    siteList.value = rows;
  } else {
    ElMessage.error(msg);
  }
};
onMounted(() => {
  getDispatchOrderList();
  getList();
});
</script>
<style lang="scss" scoped>
.form-container {
  padding: 10px;
  margin-bottom: 10px;
  background-color: white;
  .btn-container {
    display: inline-block;
    float: right;
    vertical-align: middle;
    ::v-deep .el-button > span {
      font-size: 13px;
    }
  }
  .el-form {
    display: inline-block;
    ::v-deep .el-form-item__label {
      font-size: 13px;
    }
  }
  .form-line {
    .el-form-item {
      margin: 0;
      margin-right: 20px;
    }
    .el-input {
      width: 170px;
    }
    .el-select {
      width: 170px;
    }
  }
}
.table-container {
  padding: 40px 10px;
  padding-bottom: 60px;
  background-color: white;
  .pagination-container {
    // display: inline-block;
    float: right;
    margin-top: 20px;
    background-color: white;
  }
}
::v-deep .el-tag--dark {
  margin: 5px;
  cursor: pointer;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 15px;
}
::v-deep .el-form-item__label {
  font-size: 13px;
  font-weight: 100;
  color: black;
}
::v-deep .el-button > span {
  font-size: 13px;
}
::v-deep .el-input__inner {
  font-size: 13px;
}
</style>
